{% extends 'tasks/base.html' %}

{% block title %}可视化展示{% endblock %}

{% block header %}可视化展示{% endblock %}

{% block content %}
    <div class="row">
        <div class="col-md-3 mb-4">
            <div class="card h-100">
                <div class="card-body stat-card primary">
                    <div class="stat-title">任务总数</div>
                    <div class="stat-value">
                        <a href="{% url 'task-list' %}" >{{ tasks_count }}</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3 mb-4">
            <div class="card h-100">
                <div class="card-body stat-card success">
                    <div class="stat-title">完成任务</div>
                    <div class="stat-value">
                        <a href="{% url 'task-list' %}?project=&system=&test_engineer=&dev_engineer=&project_manager=&product_manager=&status=done">{{ completed_tasks_count }}</a>
                    </div>

                </div>
            </div>
        </div>
        <div class="col-md-3 mb-4">
            <div class="card h-100">
                <div class="card-body stat-card info">
                    <div class="stat-title">待办任务</div>
                    <div class="stat-value">
                        <a href="{% url 'task-list' %}?project=&system=&test_engineer=&dev_engineer=&project_manager=&product_manager=&status=todo">{{ todo_tasks_count }}</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3 mb-4">
            <div class="card h-100">
                <div class="card-body stat-card warning">
                    <div class="stat-title">进行中任务</div>
                    <div class="stat-value">
                        <a href="{% url 'task-list' %}?project=&system=&test_engineer=&dev_engineer=&project_manager=&product_manager=&status=in_progress">{{ in_progress_tasks_count }}</a>
                    </div>

                </div>
            </div>
        </div>

    </div>

    <!-- 折线图区域 -->
    <div class="row">
        <div class="col-md-12 mb-4">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <span>增长趋势</span>
                    <div class="d-flex gap-2">
                        <div class="btn-group" role="group">
                            <button type="button" class="btn btn-sm btn-outline-secondary active" data-period="week">
                                周
                            </button>
                            <button type="button" class="btn btn-sm btn-outline-secondary" data-period="month">月
                            </button>
                            <button type="button" class="btn btn-sm btn-outline-secondary" data-period="year">年
                            </button>
                        </div>
                        <button id="exportTrendsChart" class="btn btn-sm btn-outline-primary">
                            <i class="bi bi-download me-1"></i> 导出图片
                        </button>
                    </div>
                </div>
                <div class="card-body">
                    <canvas id="growthTrendsChart" height="100"></canvas>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12 mb-4">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <span>最近任务</span>
                    <a href="{% url 'task-list' %}" class="btn btn-sm btn-outline-primary">
                        <i class="bi bi-list-ul me-1"></i> 查看全部
                    </a>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-hover">
                            <thead>
                            <tr>
                                <th>项目</th>
                                <th>系统</th>
                                <th>状态</th>
                                <th>项目经理</th>
                                <th>产品经理</th>
                                <th>开发人员</th>
                                <th>测试人员</th>
                                <th>创建时间</th>
                                <th>动作</th>
                            </tr>
                            </thead>
                            <tbody>
                            {% for task in recent_tasks %}
                                <tr>
                                    <td>{{ task.Projectname }}</td>
                                    <td>{{ task.system }}</td>
                                    <td>
                                        {% if task.status == 'done' %}
                                            <span class="badge bg-success">完成</span>
                                        {% elif task.status == 'in_progress' %}
                                            <span class="badge bg-danger">进行中</span>
                                        {% elif task.status == 'todo' %}
                                            <span class="badge bg-primary">待办</span>
                                        {% endif %}
                                    </td>
                                    <td>{{ task.ProjectManager }}</td>
                                    <td>{{ task.ProductManager }}</td>
                                    <td>{{ task.DevelopmentEngineer }}</td>
                                    <td>{{ task.TestEngineer }}</td>
                                    <td>{{ task.created_at|date:"Y-m-d H:i" }}</td>
                                    <td>
                                        <a href="{% url 'task-detail' pk=task.pk %}"
                                           class="btn btn-sm btn-outline-primary">
                                            查看
                                        </a>
                                    </td>
                                </tr>
                            {% empty %}
                                <tr>
                                    <td colspan="8" class="text-center py-4">
                                        <div class="text-muted">
                                            <i class="bi bi-info-circle me-2"></i> 暂无任务
                                        </div>

                                    </td>
                                </tr>
                            {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>


    </div>
{% endblock %}

{% block extra_js %}
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            // 从 Django 模板变量获取真实数据
            const realData = {
                week: {{ daily_data_json|safe }},
                month: {{ monthly_data_json|safe }},
                year: {{ yearly_data_json|safe }}
            };

            // 图表配置
            const growthChartConfig = {
                type: 'line',
                data: {
                    labels: realData.week.labels,
                    datasets: [
                        {
                            label: '完成任务',
                            data: realData.week.datasets.completed_tasks_count,
                            borderColor: 'rgba(75, 192, 192, 1)',
                            backgroundColor: 'rgba(75, 192, 192, 0.2)',
                            tension: 0.4,
                            fill: true
                        },
                        {
                            label: '待开始',
                            data: realData.week.datasets.todo_tasks_count,
                            borderColor: 'rgba(54, 162, 235, 1)',
                            backgroundColor: 'rgba(54, 162, 235, 0.2)',
                            tension: 0.4,
                            fill: true
                        },

                        {
                            label: '进行中',
                            data: realData.week.datasets.in_progress_tasks_count,
                            borderColor: 'rgba(255, 159, 64, 1)',
                            backgroundColor: 'rgba(255, 159, 64, 0.2)',
                            tension: 0.4,
                            fill: true
                        },
                        {
                            label: '总任务数',
                            data: realData.week.datasets.tasks_count,
                            borderColor: 'rgba(153, 102, 255, 1)',
                            backgroundColor: 'rgba(153, 102, 255, 0.2)',
                            tension: 0.4,
                            fill: true
                        },
                        {
                            label: '项目',
                            data: realData.week.datasets.tasks_count,
                            borderColor: 'rgba(255, 99, 132, 1)',
                            backgroundColor: 'rgba(255, 99, 132, 0.2)',
                            tension: 0.4,
                            fill: true
                        }

                    ]
                },
                options: {
                    responsive: true,
                    plugins: {
                        legend: {
                            position: 'top'
                        },
                        title: {
                            display: true,
                            text: '待办任务趋势'
                        }
                    },
                    interaction: {
                        mode: 'index',
                        intersect: false
                    },
                    scales: {
                        x: {
                            display: true,
                            title: {
                                display: true,
                                text: '时间'
                            }
                        },
                        y: {
                            display: true,
                            title: {
                                display: true,
                                text: '数量'
                            },
                            beginAtZero: true
                        }
                    }
                }
            };

            const growthTrendsChart = new Chart(
                document.getElementById('growthTrendsChart'),
                growthChartConfig
            );

            // 切换时间段
            document.querySelectorAll('[data-period]').forEach(button => {
                button.addEventListener('click', function () {
                    document.querySelectorAll('[data-period]').forEach(btn => btn.classList.remove('active'));
                    this.classList.add('active');

                    const period = this.getAttribute('data-period');
                    const periodData = realData[period];

                    growthTrendsChart.data.labels = periodData.labels;
                    growthTrendsChart.data.datasets[0].data = periodData.datasets.completed_tasks_count;
                    growthTrendsChart.data.datasets[1].data = periodData.datasets.todo_tasks_count;
                    growthTrendsChart.data.datasets[2].data = periodData.datasets.in_progress_tasks_count;
                    growthTrendsChart.data.datasets[3].data = periodData.datasets.tasks_count;
                    growthTrendsChart.data.datasets[4].data = periodData.datasets.tasks_count;

                    growthTrendsChart.update();
                });
            });

            // 导出图表
            document.getElementById('exportTrendsChart').addEventListener('click', function () {
                const link = document.createElement('a');
                link.download = 'growth-trends-chart.png';
                link.href = growthTrendsChart.toBase64Image();
                link.click();
            });

            // 刷新按钮
            document.getElementById('refreshTimeline').addEventListener('click', function () {
                this.classList.add('spin');
                setTimeout(() => this.classList.remove('spin'), 1000);
            });
        });
    </script>
    <style>
        .timeline .timeline-icon {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
        }

        .timeline .list-group-item {
            border-left: none;
            border-right: none;
        }

        .timeline .list-group-item:first-child {
            border-top: none;
        }

        .spin {
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            0% {
                transform: rotate(0deg);
            }
            100% {
                transform: rotate(360deg);
            }
        }

        .btn-group .btn.active {
            background-color: #6c757d;
            color: white;
        }
    </style>
{% endblock %}
